<template>
  <a-modal
    :title="data.id && '编辑班次'||'班次名称'"
    centered
    :visible="true"
    width="600"
    @cancel="dialogClosed"
  >

    <a-form
      :form="form"
    >
      <a-form-item label="班次名称" class="label-width-auto" v-bind="formItemLayout">
        <a-input
          v-decorator="[
            'name',
            { rules: [{ required: true, message: '请输入班次名称' }] },
          ]"
          placeholder="请输入"
        />
      </a-form-item>
      <table border="1" cellpadding="10" style="width:100%;text-align:center">
        <tbody>
          <tr v-for="(item, index) in dataForm.details" :key="index">
            <td style="width:30%">
              {{ weekInChinese(item.weekDay) }}
              <a-form-item v-show="false ">
                <a-input
                  v-decorator="[
                    `details[${index}].weekDay`,
                    {initialValue:item.weekDay},
                  ]"
                />
              </a-form-item>
            </td>
            <td style="width:70%;min-width:500px">
              <a-row v-for="(timeDetail, childindex) in item.timeDetails" :key="childindex" type="flex" justify="space-around" align="middle">
                <a-col :lg="9" :md="9" :sm="18">
                  <a-form-item label="上班" v-bind="formItemLayout">
                    <a-time-picker
                      v-decorator="[
                        `details[${index}].timeDetails[${childindex}].startWorkTime`,
                        { initialValue:timeDetail.startWorkTime},
                      ]"
                      format="HH:mm"
                      :allow-clear="true"
                      placeholder="请选择"
                    />
                  </a-form-item>

                </a-col>
                <a-col :lg="9" :md="9" :sm="18">
                  <a-form-item label="下班" v-bind="formItemLayout">
                    <a-time-picker
                      v-decorator="[
                        `details[${index}].timeDetails[${childindex}].endWorkTime`,
                        { initialValue:timeDetail.endWorkTime},
                      ]"
                      format="HH:mm"
                      :allow-clear="true"
                      placeholder="请选择"
                    />
                  </a-form-item>
                </a-col>
                <a-col :lg="1" :md="1" :sm="1">
                  <a-form-item class="label-width-auto" v-bind="formItemLayout">
                    <a-icon v-if="childindex === 0" type="plus-circle" style="cursor:pointer" @click="handleAdd(item.timeDetails)" />
                    <a-icon v-if="childindex !== 0" type="minus-circle" style="cursor:pointer" @click="handleDel(item.timeDetails, childindex)" />
                  </a-form-item>
                </a-col>
                <a-col :lg="5" :md="5" :sm="5">
                  <a-form-item class="label-width-auto" v-bind="formItemLayout">
                    <span v-if="index !== 0 && childindex === 0" class="primary-link" @click="handleCopy(dataForm.details, index, childindex)"><a-icon type="copy" />复制上一天</span>
                  </a-form-item>
                </a-col>

              </a-row>
            </td>
          </tr>
        </tbody>
      </table>
    </a-form>
    <span slot="footer" class="dialog-footer">
      <a-button @click="dialogClosed()">取消</a-button>
      <a-button id="submit" :loading="submitButton.status" type="primary" @click="dataFormSubmit()">{{ submitButton.text }}</a-button>
    </span>
  </a-modal>
</template>
<style lang="less" scoped>
  .ant-form-item{
    margin-bottom: 5px;
  }
</style>

<script>
import { edit, get } from '@/pages/attendance/api/attendancePlan'
import formItem from '@/config/formItemLayout'
import { weekInChinese } from '@/utils/util'
export default {
  name: 'AttendancePlanSave',
  props: {
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      formItemLayout: formItem,
      dataForm: {
        id: null,
        name: null,
        details: []
      },
      submitButton: {
        text: '提交',
        status: false
      },
      weekInChinese: weekInChinese
    }
  },
  mounted () {
    if (this.data.id) {
      this.$ajaxSend(get, this.data.id, {
        success: (datas) => {
          datas.details.forEach(detail => {
            detail.timeDetails.forEach(time => {
              if (time.startWorkTime) {
                time.startWorkTime = this.$moment(this.$moment().format('YYYY-MM-DD ') + (time.startWorkTime || ''))
              }
              if (time.endWorkTime) {
                time.endWorkTime = this.$moment(this.$moment().format('YYYY-MM-DD ') + (time.endWorkTime || ''))
              }
            })
          })
          this.dataForm = datas
          this.$initForm(this.form, this.dataForm)
        }
      })
    } else {
      for (let i = 2; i < 9; i++) {
        const index = i % 8 === 0 ? 1 : i % 8
        this.dataForm.details.push({
          weekDay: index,
          timeDetails: [{ startWorkTime: null, endWorkTime: null }]
        })
      }
      this.$initForm(this.form, this.dataForm)
    }
  },
  methods: {
    dialogClosed () {
      this.$emit('dialogClosed')
    },
    // 表单提交
    dataFormSubmit () {
      this.$saveQuit('form', edit(this.data.id), (data) => {
        data.id = this.data.id || null
        data.details.forEach(detail => {
          detail.timeDetails.forEach(time => {
            if (time.startWorkTime) {
              time.startWorkTime = this.$moment(time.startWorkTime).format('HH:mm')
            } else {
              time.startWorkTime = null
            }
            if (time.endWorkTime) {
              time.endWorkTime = this.$moment(time.endWorkTime).format('HH:mm')
            } else {
              time.endWorkTime = null
            }
          })
        })
        return data
      })
    },
    handleCopy (detail, index) {
      detail[index].timeDetails = []
      const data = this.form.getFieldsValue([`details`])
      // console.log(data)
      detail[index].timeDetails = data.details[index - 1].timeDetails.slice()
      // console.log(detail[index].timeDetails)
    },
    handleAdd (detail) {
      detail.push({ startWorkTime: null, endWorkTime: null })
    },
    handleDel (detail, index) {
      detail.splice(index, 1)
    }

  }
}
</script>
